<template lang="pug">
  .members
    //- h1 {{ msg }}
    .newMember
      cell(title="新的申请" value-align="left" is-link link="newMemberApply")
        div.notifacation(slot="icon" width="10" style="display:block;margin-right:5px;")
          img( src="../assets/o_memberList2.png")
          badge.msgNum( :text="notifacation") 
        div.value 
          img(src="../assets/fresh.png")
          span 刷新
    .membersList
      group(v-for="(user,i) in memberList" :key="user.id")
        cell.user(primary="content" value-align="left") 
          img(slot="icon" width="80" style="display:block;margin-right:5px;" :src="user.avatar")
          div.pull-left(title="value")
            .nickname {{user.nickname}}
            .id ID : {{user.uid}}
          div.actions.pull-right
            span(@click="giveBeans(user)") 赠豆
            popover.more(placement="left" :gutter="parseInt(-190)" @on-show="onShow" @on-hide="onHide")
              div( slot="content" class="popover-demo-content")
                span(@click="delMember(user,i)") 剔除
                span |
                span(@click="decre(user,i)") 减豆
                span |
                span(@click="detail(user)") 明细
              span 操作
</template>

<script>
import memberService from '@/api/member'

export default {
  name: 'members',
  data () {
    return {
      notifacation: 4,
      pagination: {
        page: 1,
        pagesize: 10
      },
      memberList: []
    }
  },
  created () {
    document.title = '成员列表'
    this.getMembers()
  },
  methods: {
    getMembers () {
      memberService.GuildMember(this.pagination)
        .then(res => {
          this.memberList = res.result.list
          console.log(res)
        })
    },
    onShow () {

    },
    onHide () {

    },
    delMember (user, i) {
      memberService.RemoveMember({
        rid: user.uid
      })
        .then(res => {
          this.$vux.alert.show({
            title: '踢出成功'
          })
          this.memberList.splice(i, 1)
        })
    },
    decre (user) {

    },
    detail (user) {

    },
    giveBeans (user) {
      var that = this
      this.$vux.confirm.show({
        title: '请输入赠送数量',
        showInput: true,
        onConfirm (value) {
          memberService.SendPoints({
            rid: user.uid,
            amount: value
          })
            .then(res => {
              that.$vux.alert.show({
                title: '赠送成功'
              })
            })
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.vux-popover{
  background-color: transparent !important;
  .vux-popover-arrow-right{
    border-left-color: #f90;
    right:3px;
  }
}
.popover-demo-content{
  background: #f90;
  // height: 60px;
  // line-height: 60px;
  padding:10px;
  font-size: 20px;
  border-radius: 6px;
  position: relative;
  right: 8px;
  // right:0px;
}
.members  {
  background-color: #f2f2f2;
  .newMember{
    .value{
      text-align: right;
      font-size: 20px;
      color:turquoise;
      img{
        width: 30px;
      }
    }
  }
  .notifacation{
    position: relative;
    width: 30px;
    img{
      width: 100%;
    }
    .msgNum{
      position: absolute;
      top: 0;
      right: -10px;
    }
  }
  .weui-cell{
    background-color: #fff;
  }
  .actions{
    height: 100%;
    padding:10px 0px;
    position: absolute;
    right: 10px;
    >span{
      display: inline-block;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 30px;
      background-color: aqua;
      margin-left: 10px;
      color: #fff;
      
    }
    .more{
      background-color: #f90;
      display: inline-block;
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 30px;
    }
  }
}
  
</style>
